<template>
  <div class="msg-list">
    <div class="msg-top">
      <img src="../../assets/img/pic3.png">
    </div>
    <div class="msg-bottom">
      <span class="title">打破设计美学思想</span>
      <p class="introduce">liuyuxi来自厦门，是服装节的知名设计师，从事泳衣设计二十年的时间里，曾获得了国内多项设计大奖，此次关于印花泳装的设计突破了一样的传统广告</p>
      <span class="time">2018-09-14</span>
    </div>
    <div class="moban"></div>
  </div>
</template>

<script>
    export default {
      name: 'msg'
    }
</script>

<style scoped>
  .msg-list{
    width: 354px;
    height: 100%;
    border: 1px solid #f2f2f2;
  }
  .msg-top{
    width: 100%;
    height: 180px;
  }
  .msg-bottom{
    width: 314px;
    padding: 24px 20px;
    border-top: 1px solid #f2f2f2;
  }
  .introduce{
    color:#646464;
    font-size: 14px;
    font-family: "Microsoft YaHei";
    line-height: 22px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    margin-top: 10px;
  }
  .title{
    font-size: 16px;
    color: #464646;
    line-height: 24px;
    font-family: "Microsoft YaHei";
    overflow: hidden;
    display: -webkit-box;
    white-space: nowrap;
  }
  .time{
    color: #cecece;
    font-size: 12px;
  }
  .moban {
    position: relative;
    top: -360px;
    left: 0;
    background: rgba(222, 228, 248, 0.6);
    width: 355px;
    height:352px;
    display: none;
  }
.msg-list:hover .moban{
  display: block;
}
</style>
